<template>
  <div class="dialog">
    <el-dialog
      :title="'告警模板'+titleText"
      :visible.sync="showDialog"
      width="55%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        class="el-form"
      >
        <el-form-item label="模板名称:" class="w50p">
          <el-input
            v-model="formData.templateName"
            clearable
          />
        </el-form-item>
        <el-form-item label="数据类型:" class="w50p">
          <el-select
            v-model="nowdataType"
            clearable
            filterable
            :placeholder="formData.dataTypeName"
            @change="addDataType"
          >
            <el-option
              v-for="(item,index) in dataTypeList"
              :key="index"
              :value="{value:item.dataTypeId,name:item.dataTypeName}"
              :label="item.dataTypeName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="发送间隔:" class="w50p">
          <el-input
            v-model="formData.sendingInterval"
            clearable
          />
        </el-form-item>
        <el-form-item label="滤波类型:" class="w50p">
          <el-select
            v-model="nowfilterType"
            clearable
            filterable
            :placeholder="formData.filterType"
            @change="addFilterType"
          >
            <el-option
              v-for="(item,index) in filterTypeList"
              :key="index"
              :value="{value:index,name:item.name}"
              :label="item.name"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="滤波值:" class="w50p">
          <el-input
            v-model="formData.filterValue"
            clearable
          />
        </el-form-item>
        <el-form-item label="告警通知配置:" class="w50p">
          <el-select
            v-model="alarmContactId"
            clearable
            filterable
          >
            <el-option
              v-for="(item,index) in contactmanList"
              :key="index"
              :value="item.noticeConfigId"
              :label="item.noticeConfigName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="上限列表:" class="w50p">
          <div v-if="basetopList.levelName.length > 0 || nowChanceStau === 'add' || nowChanceStau === 'edit'">
            <div class="line">
              <el-input
                v-model="basetopList.levelName"

                clearable
                placeholder="级别名称"
              />
              <el-input
                v-model="basetopList.thresholdValue"

                clearable
                placeholder="级别阈值"
              />
              <el-select v-model="basetopList.alarmTypeId" filterable clearable>
                <el-option v-for="(item,index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
              </el-select>
              <div class="line-click" @click="addtopList()">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-for="(item,index) in nowtopList" :key="index" class="line">
              <el-input
                v-model="nowtopList[index].levelName"

                clearable
                placeholder="级别名称"
              />
              <el-input
                v-model="nowtopList[index].thresholdValue"

                clearable
                placeholder="级别阈值"
              />
              <el-select v-model="nowtopList[index].alarmTypeId" filterable clearable>
                <el-option v-for="(alarmTypeitem,alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
              </el-select>
              <div class="line-click" @click="deltopList(index)">
                <i class="el-icon-minus"></i>
              </div>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="下限列表:" class="w50p">
          <div v-if="basetopList.levelName.length > 0 || nowChanceStau === 'add' || nowChanceStau === 'edit'">
            <div class="line">
              <el-input
                v-model="basebottomList.levelName"

                clearable
                placeholder="级别名称"
              />
              <el-input
                v-model="basebottomList.thresholdValue"

                clearable
                placeholder="级别阈值"
              />
              <el-select v-model="basebottomList.alarmTypeId" filterable clearable>
                <el-option v-for="(item,index) in alarmTypeList" :key="index" :label="item.alarmTypeName" :value="item.alarmTypeId" />
              </el-select>
              <div class="line-click" @click="addbottomList()">
                <i class="el-icon-plus"></i>
              </div>
            </div>
            <div v-for="(item,index) in nowbottomList" :key="index" class="line">
              <el-input
                v-model="nowbottomList[index].levelName"

                clearable
                placeholder="级别名称"
              />
              <el-input
                v-model="nowbottomList[index].thresholdValue"

                clearable
                placeholder="级别阈值"
              />
              <el-select v-model="nowbottomList[index].alarmTypeId" filterable clearable>
                <el-option v-for="(alarmTypeitem,alarmTypeindex) in alarmTypeList" :key="alarmTypeindex" :label="alarmTypeitem.alarmTypeName" :value="alarmTypeitem.alarmTypeId" />
              </el-select>
              <div class="line-click" @click="delbottomList(index)">
                <i class="el-icon-minus"></i>
              </div>
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import alarmTemplateConfigurationApi from "@/api/monitoring-alarm/alarm-template-configuration";
import contactreq from "@/api/monitoring-alarm/system-notification-configuration/index"
export default {
  name: '',
  components: { },
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    nowChanceStau: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    editObject: {
      type: [Object],
      default: () => {
        return {}
      }
    }
  },
  data() {
    return {
      formData: {},
      rules: {
        typeName: [
          { required: true, message: "请输入任务类型名称", trigger: ["change", "blur"] }
        ]
      },
      // 主要联系人
      alarmContactId: '',
      checkedGroupone: [],
      // 其他联系人
      qitacontactmanId: '',
      checkedGrouptwo: [],
      // 联系人可选择列表
      contactmanList: [],
      // 上限列表
      basetopList: {
        levelName: '',
        alarmTypeId: '',
        thresholdType: 'max',
        thresholdValue: ''
      },
      nowtopList: [],
      // 下限列表
      basebottomList: {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'min',
        thresholdValue: ''
      },
      nowbottomList: [],
      // 滤波类型
      nowfilterType: {},
      filterTypeList: [
        {
          name: "时间"
        },
        {
          name: "次数"
        }
      ],
      // 数据类别
      nowdataType: {},
      dataTypeList: [],
      // 告警类型下拉数据
      alarmTypeList: [],
      showDialog: this.show
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    nowChanceStau(v) {
      if (v === 'edit') {
        var row = this.editObject
        this.formData = {
          alarmTemplateId: row.alarmTemplateId,
          templateName: row.templateName,
          sendingInterval: row.sendingInterval,
          filterValue: row.filterValue,
          filterType: row.filterType,
          dataTypeId: row.dataTypeId,
          dataTypeName: row.dataTypeName
        }
        this.nowdataType = {
          value: row.dataTypeId,
          name: row.dataTypeName
        }
        this.addDataType({ name: row.dataTypeName, value: row.dataTypeId })
        // row.alarmTemplateSendMapperList.forEach(
        //   item => {
        //     if (item.charge === true) {
        //       this.alarmContactId = item.alarmContactId
        //       this.checkedGroupone = []
        //       // 联系方式的赋值
        //       if (item.sendPhone === true) {
        //         this.checkedGroupone.push(0)
        //       }
        //       if (item.sendEmail === true) {
        //         this.checkedGroupone.push(1)
        //       }
        //       if (item.sendWeChat === true) {
        //         this.checkedGroupone.push(2)
        //       }
        //     }
        //     if (item.charge === false) {
        //       this.qitacontactmanId = item.alarmContactId
        //       this.checkedGrouptwo = []
        //       // 联系方式的赋值
        //       if (item.sendPhone === true) {
        //         this.checkedGrouptwo.push(0)
        //       }
        //       if (item.sendEmail === true) {
        //         this.checkedGrouptwo.push(1)
        //       }
        //       if (item.sendWeChat === true) {
        //         this.checkedGrouptwo.push(2)
        //       }
        //     }
        //   }
        // )
        let mainlist = row.alarmTemplateThresholdList
        // 上限列表和下限列表的赋值
        this.basetopList = {
          levelName: '',
          alarmTypeId: '',
          thresholdType: 'max',
          thresholdValue: ''
        }
        this.nowtopList = []
        this.basebottomList = {
          levelName: '',
          alarmTypeId: '',
          thresholdType: 'min',
          thresholdValue: ''
        }
        this.nowbottomList = []
        for (var i = 0; i < mainlist.length; i++) {
          if (mainlist[i].thresholdType === "max") {
            if (this.basetopList.levelName.length === 0) {
              this.basetopList = mainlist[i]
            } else {
              this.nowtopList.push(mainlist[i])
            }
          } else if (mainlist[i].thresholdType === "min") {
            if (this.basebottomList.levelName.length === 0) {
              this.basebottomList = mainlist[i]
            } else {
              this.nowbottomList.push(mainlist[i])
            }
          }
        }
      }
    }
  },
  created() {
    // this.queryEquipType()
  },
  mounted() {
    this.getselectlist()
  },
  methods: {
    // 获取下拉数据
    getselectlist() {
      // 获取所有数据类型
      alarmTemplateConfigurationApi.getalldatalist().then(res => {
        this.dataTypeList = res.data
      })
      // 获取所有联系人
      contactreq.querybycondition({ organizationNo: sessionStorage.organizationNo }).then(res => {
        this.contactmanList = res.data
      })
    },
    // 添加一条下限数据
    addbottomList() {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      let addvalue = {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'min',
        thresholdValue: ''
      }
      this.nowbottomList.push(addvalue)
    },
    // 添加一条下限数据
    delbottomList(i) {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      this.nowbottomList.splice(i, 1)
    },
    // 添加一条上限数据
    addtopList() {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      let addvalue = {
        alarmTypeId: '',
        levelName: '',
        thresholdType: 'max',
        thresholdValue: ''
      }
      this.nowtopList.push(addvalue)
    },
    // 删除一条上限数据
    deltopList(i) {
      if (this.nowChanceStau !== 'add' && this.nowChanceStau !== 'edit') {
        return
      }
      this.nowtopList.splice(i, 1)
    },
    // 将选择的数据类别添加到表单中 --获取告警类型列表
    addDataType(e) {
      if (this.nowChanceStau === "add" || this.nowChanceStau === "edit") {
        this.formData.dataTypeId = e.value
        this.formData.dataTypeName = e.name
      }
      alarmTemplateConfigurationApi.getalarmTypelist(e.value).then(
        res => {
          let data = res.data
          this.chancealarmtype(data)
        }
      )
    },
    // 处理数据类型数据
    chancealarmtype(list) {
      let newlist = []
      list.forEach((item, index) => {
        newlist.push(item.alarmType)
      });
      this.alarmTypeList = newlist
    },
    // 添加滤波类型
    addFilterType(e) {
      if (this.nowChanceStau === "add" || this.nowChanceStau === "edit") {
        this.formData.filterType = e.name
      }
    },
    save() {
      if (this.nowChanceStau === 'edit') {
        let editparams = {
          alarmTemplateSendMapperList: [
            // 主要联系人
            {
              alarmContactId: this.alarmContactId,
              charge: true,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            },
            // 其他联系人
            {
              alarmContactId: this.qitacontactmanId,
              charge: false,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            }
          ],
          alarmTemplateThresholdList: [
            // // 上限数据
            // this.basetopList,
            // ...this.nowtopList,
            // // 下限数据
            // this.basebottomList,
            // ...this.nowbottomList
          ],
          // 下面时一些与其他数据
          // filterType: this.formData.name,
          // dataTypeName: this.nowdataType.name,
          // dataTypeId: this.nowdataType.value,
          ...this.formData
        }
        // bug优化
        if (this.alarmContactId.length > 0) {
          editparams.alarmTemplateSendMapperList.push(
            {
              alarmContactId: this.alarmContactId,
              charge: true,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            })
        }
        if (this.qitacontactmanId.length > 0) {
          editparams.alarmTemplateSendMapperList.push(
            {
              alarmContactId: this.qitacontactmanId,
              charge: false,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            })
        }
        if (editparams.alarmTemplateSendMapperList === []) {
          delete editparams.alarmTemplateSendMapperList
        }
        let newlevellist = [
          // 上限数据
          this.basetopList,
          ...this.nowtopList,
          // 下限数据
          this.basebottomList,
          ...this.nowbottomList]
        newlevellist.forEach(
          (item, index) => {
            if (item.levelName.length > 0) {
              editparams.alarmTemplateThresholdList.push(item)
            }
          }
        )
        if (newlevellist === []) {
          delete editparams.alarmTemplateThresholdList
        }
        // ---end---
        if (this.nowdataType.length > 0) {
          this.formData.dataTypeName = this.nowdataType.name
          this.formData.dataTypeId = this.nowdataType.value
        }
        // if(this.nowfilterType.name)
        // editparams
        // 联系方式
        if (this.checkedGroupone.length > 0) {
          if (this.checkedGroupone.indexOf(0) > -1) {
            editparams.alarmTemplateSendMapperList[0].sendPhone = true
          }
          if (this.checkedGroupone.indexOf(1) > -1) {
            editparams.alarmTemplateSendMapperList[0].sendEmail = true
          }
          if (this.checkedGroupone.indexOf(2) > -1) {
            editparams.alarmTemplateSendMapperList[0].sendWeChat = true
          }
        }
        if (this.checkedGrouptwo.length > 0) {
          if (this.checkedGrouptwo.indexOf(0) > -1) {
            editparams.alarmTemplateSendMapperList[1].sendPhone = true
          }
          if (this.checkedGrouptwo.indexOf(1) > -1) {
            editparams.alarmTemplateSendMapperList[1].sendEmail = true
          }
          if (this.checkedGrouptwo.indexOf(2) > -1) {
            editparams.alarmTemplateSendMapperList[1].sendWeChat = true
          }
        }
        // 编辑接口
        alarmTemplateConfigurationApi.editlist(editparams).then(res => {
          if (res.code === 1) {
            this.$message.success("修改成功！");
            this.close()
          } else {
            this.$message.error(res.msg);
          }
        });
      } else if (this.nowChanceStau === 'add') {
        let addparams = {
          alarmTemplateSendMapperList: [
            // 主要联系人
            // {
            //   alarmContactId: this.alarmContactId,
            //   charge: true,
            //   sendPhone: false,
            //   sendEmail: false,
            //   sendWeChat: false
            // },
            // // 其他联系人
            // {
            //   alarmContactId: this.qitacontactmanId,
            //   charge: false,
            //   sendPhone: false,
            //   sendEmail: false,
            //   sendWeChat: false
            // }
          ],
          alarmTemplateThresholdList: [
            // 上限数据
            // this.basetopList,
            // ...this.nowtopList,
            // // 下限数据
            // this.basebottomList,
            // ...this.nowbottomList
          ],
          // 下面时一些与其他数据
          // filterType: this.nowfilterType.name,
          // dataTypeName: this.nowdataType.name,
          // dataTypeId: this.nowdataType.value,
          ...this.formData
        }
        // bug优化
        if (this.alarmContactId.length > 0) {
          addparams.alarmTemplateSendMapperList.push(
            {
              alarmContactId: this.alarmContactId,
              charge: true,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            })
        }
        if (this.qitacontactmanId.length > 0) {
          addparams.alarmTemplateSendMapperList.push(
            {
              alarmContactId: this.qitacontactmanId,
              charge: false,
              sendPhone: false,
              sendEmail: false,
              sendWeChat: false
            })
        }
        if (addparams.alarmTemplateSendMapperList === []) {
          delete addparams.alarmTemplateSendMapperList
        }
        let newlevellist = [
          // 上限数据
          this.basetopList,
          ...this.nowtopList,
          // 下限数据
          this.basebottomList,
          ...this.nowbottomList]
        newlevellist.forEach(
          (item, index) => {
            if (item.levelName.length > 0) {
              addparams.alarmTemplateThresholdList.push(item)
            }
          }
        )
        if (newlevellist === []) {
          delete addparams.alarmTemplateThresholdList
        }
        // end

        if (this.nowdataType.length > 0) {
          this.formData.dataTypeName = this.nowdataType.name
          this.formData.dataTypeId = this.nowdataType.value
        }
        // 联系方式
        // if (this.checkedGroupone.length > 0) {
        //   if (this.checkedGroupone[0] === 0) {
        //     addparams.alarmTemplateSendMapperList[0].sendPhone = true
        //   } else if (this.checkedGroupone[0] === 1) {
        //     addparams.alarmTemplateSendMapperList[0].sendEmail = true
        //   } else if (this.checkedGroupone[0] === 2) {
        //     addparams.alarmTemplateSendMapperList[0].sendWeChat = true
        //   }
        // }
        // if (this.checkedGrouptwo.length > 0) {
        //   if (this.checkedGrouptwo[0] === 0) {
        //     addparams.alarmTemplateSendMapperList[1].sendPhone = true
        //   } else if (this.checkedGrouptwo[0] === 1) {
        //     addparams.alarmTemplateSendMapperList[1].sendEmail = true
        //   } else if (this.checkedGrouptwo[0] === 2) {
        //     addparams.alarmTemplateSendMapperList[1].sendWeChat = true
        //   }
        // }
        // 联系方式
        if (this.checkedGroupone.length > 0) {
          if (this.checkedGroupone.indexOf(0) > -1) {
            addparams.alarmTemplateSendMapperList[0].sendPhone = true
          }
          if (this.checkedGroupone.indexOf(1) > -1) {
            addparams.alarmTemplateSendMapperList[0].sendEmail = true
          }
          if (this.checkedGroupone.indexOf(2) > -1) {
            addparams.alarmTemplateSendMapperList[0].sendWeChat = true
          }
        }
        if (this.checkedGrouptwo.length > 0) {
          if (this.checkedGrouptwo.indexOf(0) > -1) {
            addparams.alarmTemplateSendMapperList[1].sendPhone = true
          }
          if (this.checkedGrouptwo.indexOf(1) > -1) {
            addparams.alarmTemplateSendMapperList[1].sendEmail = true
          }
          if (this.checkedGrouptwo.indexOf(2) > -1) {
            addparams.alarmTemplateSendMapperList[1].sendWeChat = true
          }
        }
        // ---
        // console.log(addparams)
        alarmTemplateConfigurationApi.addlist(addparams).then(res => {
          if (res.code === 1) {
            this.$message.success(res.msg);
            this.close()
          } else {
            this.$message.error(res.msg);
          }
        });
      }
    },
    close() {
      this.$emit("closeDialog");
    },
    cancel() {
      this.$emit("cancelDialog");
    }
  }
};
</script>

<style lang="scss" scoped>
.line{
  width: 100%;
  display: flex;
  flex-wrap: nowrap;
  .line-click{
    width: 90px;
    height: 30px;
    // background-color: aqua;
    display: flex;
    justify-content: center;
    align-items: center;
    border: snow 1px solid;
    border-radius: 50%;
    margin-bottom: 10px;
    margin-top: 5px;
    margin-left: 5px;
    color:#fff;
    background-color:#003947 ;
    cursor: pointer;
  }
}
</style>
